<template>
  <div>
    <el-dialog
      :title="this.adminInfo.isAdd ? '新增管理员' : '编辑管理员'"
      :visible.sync="adminInfo.isShow"
      center
      :before-close="cancel"
    >
      <el-form :model="adminForm" :rules="rules" ref="adminForm">
        <el-form-item
          label="所属角色"
          :label-width="formLabelWidth"
          prop="roleid"
        >
          <el-select v-model="adminForm.roleid" placeholder="请选择">
            <!-- <el-option label="超级管理员" :value="0"></el-option> -->
            <el-option
              v-for="item in $store.getters['role/getRole']"
              :key="item.id"
              :label="item.rolename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="用户名称"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input v-model="adminForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="adminForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="adminForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { useradd, useredit } from "../../require/api";
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      adminForm: {
        roleid: "", //角色编号number
        username: "", //管理员名称string
        password: "", //密码string
        status: 1, //状态  1正常2禁用number
      },
      formLabelWidth: "120px",
      rules: {
        roleid: [
          { required: true, message: "请选择角色名称", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 3, max: 7, message: "长度在 3 到 7 个字符", trigger: "blur" },
        ],
      },
    };
  },
  props: ["adminInfo"],
  computed: {
    ...mapGetters({ adminList: "admin/getAdmin" }),
    ...mapGetters({ usertotal: "admin/getUserTotal" }),
  },
  mounted() {
    // 调用role列表 优化性能 做个判断 如果已存在调用role的数据 则不用再次调用，否则调用
    if (this.$store.getters["role/getRole"].length == 0) {
      this.$store.dispatch("role/getRoleAction");
    }
  },
  methods: {
    ...mapActions({ getAdminAction: "admin/getAdminAction" }),
    ...mapActions({ getTotalAction: "admin/getTotalAction" }),

    // 重置设置
    reset() {
      // 内容重置
      this.adminForm = {
        roleid: "", //角色编号number
        username: "", //管理员名称string
        password: "", //密码string
        status: 1, //状态  1正常2禁用number
      };
      //   验证清空
      this.$refs.adminForm.resetFields();
    },
    // 取消
    cancel() {
      //清空重置
      this.reset();
      //关闭窗口
      this.$emit("cancel", false);
      //   this.adminInfo.isShow = false;
    },
    //修改id
    lookup(e) {
      this.adminForm = { ...e };
      console.log(e);
      return; //
      // 请求一条修改数据
      useredit({ id }).then((res) => {
        if (res.code == 200) {
          // 成功提示
          this.$message.success(res.msg);
          // 数据回显
          this.adminForm = res.list;
          this.adminForm.id = id;
        } else {
          // 提示
          this.$message.error(res.msg);
        }
      });
    },
    // 确认新建还是修改
    confirm() {
      // return;
      this.$refs.adminForm.validate((valid) => {
        if (valid) {
          // 确认新建
          if (this.adminInfo.isAdd) {
            // this.adminForm.roleid = this.roleList.id;
            // 调接口添加
            useradd(this.adminForm).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                // 关闭弹窗
                this.cancel();
                // 更新页面
                // this.$store.dispatch("admin/getAdminAction");
                // this.getAdminAction(this.obj);
                this.getAdminAction();
                this.getTotalAction();

                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
            //
          } else {
            // 修改
            useredit(this.adminForm).then((res) => {
              if (res.code == 200) {
                // 关闭弹窗
                this.cancel();
                // 更新页面
                this.getAdminAction();
                // this.getAdminAction(this.obj);
                this.getTotalAction();

                //成功
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang=less scoped >
</style>
